// @import '~ant-design-vue/dist/antd.less';

:root {
  --cell-border-radius: var(--border-radius-medium);
  --cell-img-boder-radius: var(--border-radius-x-small);

  --cell-count-per-row-in-collection: 5;
  --cell-headline-height: 48px;
  --cell-headline-line-height: 20px;
  --cell-subhead-height: 24px;
  --cell-padding: var(--padding-medium);
  --cell-margin: var(--margin-x-small);

  --collection-content-width: ~'calc( var(--viewport-content-width) + 2 * var(--cell-margin))';
  --collection-padding-subtoal: ~'calc(var(--cell-count-per-row-in-collection) * 2 * var(--cell-padding))';
  --collection-margin-subtoal: ~'calc(var(--cell-count-per-row-in-collection) * 2 * var(--cell-margin))';
  --collection-cell-total-width: ~'calc(var(--collection-content-width) - var(--collection-padding-subtoal) - var(--collection-margin-subtoal))';
  --collection-cell-content-size: ~'calc(var(--collection-cell-total-width)/ var(--cell-count-per-row-in-collection))';

  --cell-count-per-row-in-collection-for-video: 3;
  --collection-cell-content-size-for-video: ~'calc(var(--collection-cell-total-width)/ var(--cell-count-per-row-in-collection-for-video))';
  --collection-cell-height-for-video: ~'calc(9 * var(--collection-cell-content-size-for-video)/16 )';

  --collection-cell-demand-width: ~'calc(var(--collection-cell-content-size) + 2 * var(--cell-padding) )';
  --collection-cell-demand-height: ~'calc(5 * var(--collection-cell-demand-width)/4 )';

  --collection-content-width-shop: ~'calc(var(--collection-content-width) - 200px - var(--padding-small))';

  //首页合作品牌
  --cell-count-per-row-in-collection-brand: 6;
  --cell-brand-padding-vertical: var(--padding-xx-small);
  --cell-brand-padding-horizontal: var(--padding-medium);
  --cell-brand-margin-vertical: var(--margin-x-small);
  --cell-brand-margin-horizontal: var(--margin-x-small);
  --cell-brand-border-width: 1px;
  --collection-brand-content-width: var(--news-section-width);
  --collection-brand-padding-subtoal: ~'calc(var(--cell-count-per-row-in-collection-brand) * 2 * var(--cell-brand-padding-horizontal))';
  --collection-brand-margin-subtoal: ~'calc(var(--cell-count-per-row-in-collection-brand) * 2 * var(--cell-brand-margin-horizontal))';
  --collection-brand-border-width-subtoal: ~'calc(var(--cell-count-per-row-in-collection-brand) * 2 * var(--cell-brand-border-width) )';
  --collection-cell-brand-content-size: ~'calc((var(--collection-brand-content-width) - var(--collection-brand-padding-subtoal) - var(--collection-brand-margin-subtoal) - var(--collection-brand-border-width-subtoal) ) / var(--cell-count-per-row-in-collection-brand))';
}

@media screen and (min-width: 1920px) {
}

@media screen and (min-width: 1307px) and (max-width: 1919px) {
  .collection .container .cell-demand {
    height: auto !important;
  }
  .collection .container .cell-demand .cell-header h3 {
    font-size: 14px !important;
  }
  .collection .container .cell-demand .cell-header {
    padding: var(--padding-small) var(--padding-x-small) var(--padding-small) var(--padding-x-small) !important;
  }
  .collection .container .cell-demand .cell-body {
    font-size: 10px !important;
    padding: var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) !important;
  }
  .collection .container .cell-demand .cell-body p {
    margin: var(--margin-xx-small) 0px;
  }
  .collection .container .cell-demand .cell-footer {
    min-height: 60px !important;
    padding: var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) !important;
  }
  .collection .container .cell-demand .cell-footer .cell-footer-text {
    font-size: 12px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1306px) {
  .collection .container .cell-demand {
    height: auto !important;
  }
  .collection .container .cell-demand .cell-header h3 {
    font-size: 14px !important;
  }
  .collection .container .cell-demand .cell-header {
    padding: var(--padding-small) var(--padding-x-small) var(--padding-small) var(--padding-x-small) !important;
  }
  .collection .container .cell-demand .cell-body {
    font-size: 10px !important;
    padding: var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) !important;
  }

  .collection .container .cell-demand .cell-body p {
    margin: var(--margin-xxx-small) 0px;
  }
  .collection .container .cell-demand .cell-footer {
    min-height: 60px !important;
    padding: var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) !important;
  }
  .collection .container .cell-demand .cell-footer .cell-footer-text {
    font-size: 12px !important;
  }
}

.collection {
  // background-color: red;
  width: var(--collection-content-width);
}

.collection .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.collection .container .cell {
  border-radius: var(--cell-border-radius);
  margin: var(--cell-margin) var(--cell-margin) !important;
  padding: var(--cell-padding) var(--cell-padding) !important;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  background-color: white;
  box-shadow: var(--r-cell-box-shadow);
}

.collection .container .cell:hover {
  /* inset positionx positiony blur spread color*/
  box-shadow: var(--r-cell-box-shadow-hover);
}

.collection .container .cell img {
  border-radius: var(--cell-img-boder-radius);
  object-fit: cover;
  width: var(--collection-cell-content-size);
  height: var(--collection-cell-content-size);
}

.cell-headline {
  font-size: 14px;
  font-weight: 500;
  width: var(--collection-cell-content-size);
  height: var(--cell-headline-height);
  line-height: var(--cell-headline-line-height);
  color: var(--r-text-color-primary);
  margin-top: var(--margin-large);
  text-align: justify;
  word-break: break-all;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.cell-subhead {
  font-size: 12px;
  margin-top: var(--margin-x-small);
  width: var(--collection-cell-content-size);
  text-align: justify;
  color: var(--r-primary-color);
  color: var(--r-text-color-secondary);
}
.cell-subhead-price {
  font-size: 20px;
  height: var(--cell-subhead-height);
  color: var(--r-primary-color);
  color: var(--r-text-color-secondary);
}
.cell-subhead-shop {
  font-size: 14px;
  font-weight: 400;
}

.collection .container .cell-demand {
  padding: 0 0 !important;
  width: var(--collection-cell-demand-width);
  height: var(--collection-cell-demand-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.collection .container .cell-demand .cell-header h3 {
  font-size: 14px !important;
  line-height: 1.5rem;
  max-height: 3rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.collection-shop {
  width: var(--collection-content-width-shop) !important;
}

.collection .container .cell-demand .purchase-count {
  margin-right: var(--margin-x-small);
}

.cell-header {
  border-radius: var(--cell-border-radius) var(--cell-border-radius) 0 0;
  padding: var(--padding-medium) var(--padding-medium) var(--padding-small) var(--padding-medium);
  background-color: var(--r-background-gray-4) !important;
}

.cell-header-info {
  display: flex;
  margin-top: var(--margin-x-small);
  font-size: 12px;
}
.cell-body {
  padding: var(--padding-x-small) var(--padding-medium) var(--padding-x-small) var(--padding-medium);
  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
}

.cell-body p {
  margin: var(--margin-small) 0px;
  line-height: 16px;
  // font-size: 14px;
}
.cell-footer {
  padding: var(--padding-x-small) var(--padding-medium) var(--padding-medium) var(--padding-medium);
  min-height: 64px !important;
}
.cell-footer-text {
  font-weight: 500;
  line-height: 20px;
  font-size: 14px;
  color: var(--r-text-color-primary);
}
// .cell-footer h4:hover {
//   color: var(--r-primary-color);
// }
.number {
  color: var(--r-primary-color);
}

.collection-news {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: var(--news-collection-width);
}
.collection-news .cell {
  margin: var(--margin-x-small) var(--margin-x-small);
  background-color: var(--r-background-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--r-cell-box-shadow);
}
.collection-news .container {
  padding: var(--padding-medium) var(--padding-medium);
  display: flex;
  align-items: top;
  justify-content: flex-start;
  /* flex-flow: row wrap; */
}

.collection-news .cell:hover {
  box-shadow: var(--r-cell-box-shadow-hover);
}

.collection-news .container .image {
  width: var(--news-cell-cover-width);
  height: var(--news-cell-cover-height);
  margin-right: 10px;
  border-radius: 5px;
  object-fit: cover;
}

.collection-news .container .text {
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: space-between;
  /* background-color: red; */
}
.news-cell-headline {
  font-size: 14px;
  font-weight: 500;
  line-height: var(--cell-headline-line-height);
  color: var(--r-text-color-primary);
  // margin-top: var(--margin-large);
  text-align: justify;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-cell-headline:hover {
  color: var(--r-primary-color) !important;
}

.news-cell-subhead {
  font-size: 12px;
  margin-top: 4px;
  text-align: justify;
  line-height: 16px;
  color: var(--r-primary-color);
  color: var(--r-text-color-secondary);
}

.collection-news .container .text .status-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  color: var(--r-text-color-secondary);
  height: 20px;
}

.collection-news .footer .container h5 {
  color: var(--r-text-color-white);
}

.collection-news .footer .container h5 {
  color: var(--r-text-color-white);
}

.collection-forums {
  margin: 0 auto;
  width: var(--viewport-content-width);
}

.collection-forums .container {
  padding: var(--padding-medium) var(--padding-medium);
  display: flex;
  align-items: top;
  justify-content: flex-start;
  /* flex-flow: row wrap; */
}

.collection-forums .cell {
  background-color: var(--r-background-white);
  margin: var(--margin-x-large) 0;
  border-radius: 10px;
  // max-height: 240px;
  overflow: hidden;
  box-shadow: var(--r-cell-box-shadow);
}

.collection-forums .cell:hover {
  box-shadow: var(--r-cell-box-shadow-hover);
}

.collection-forums .container > img {
  width: 120px;
  height: 90px;
  margin-right: 10px;
  border-radius: 10px;
}
.collection-forums .container .text {
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: space-between;
}

.collection-forums .container .text > div > p {
  padding: 8px 0px;
  font-size: 12px !important;
  opacity: var(--r-opacity-secondary);
}
.collection-forums .container .text > p:nth-child(2) {
  font-size: 12px;
  opacity: var(--r-opacity-tertiary);
  line-height: 1.8;
  overflow: hidden;
  max-height: 42px;
}
.collection-forums .container .text > p:nth-child(3) {
  font-size: 12px;
  opacity: var(--r-opacity-tertiary);
  line-height: 1.8;
  overflow: hidden;
  max-height: 42px;
}

.collection-forums .footer .container h5 {
  color: var(--r-text-color-white);
}

.collection-forums .footer .container h5 {
  color: var(--r-text-color-white);
}

.collection-forums .actions-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 var(--padding-medium) var(--padding-medium) var(--padding-medium);
}
.section-content-industry {
  width: ~'calc( var(--viewport-content-width) + 2 * 16px)' !important;
}
.collection-industry {
  display: flex;
  justify-content: center;
  // background-color: rebeccapurple;
}
.collection-industry .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.collection-industry .container .cell {
  margin: 10px 16px;
  border-radius: 5px;
  width: 33.333333%;
  max-width: 33.333333%;
  flex: 1 1 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--r-cell-box-shadow);
}

.collection-industry .container .cell:hover {
  box-shadow: var(--r-cell-box-shadow-hover);
}

.collection-industry .container .cell img {
  height: ~'calc( (var(--viewport-content-width) - 2 *16px) * 0.333333 * 0.75 )' !important;
  object-fit: cover;
}

.collection-industry .container .cell .info {
  padding: 4px 20px 20px 20px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.industry-cell-headline {
  height: 24px !important;
}
.industry-cell-subhead {
  width: fit-content !important;
}
.forums-cell-container {
  height: var(--forums-cell-cover-height) !important;
}
.cell-plain-headline {
  height: 24px !important;
}
.cell-plain {
  width: var(--news-cover-width) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cell-plain-container {
  display: flex;
  flex-direction: column;
}
.cell-plain-divider {
  margin: 12px;
}
.cell-plain-tabs {
  margin: 0 16px;
}
.cell-plain-tabs .ant-tabs-bar {
  margin: 0 !important;
  border-color: transparent !important;
}
.cell-plain-divider-header {
  margin: 0px 12px;
}

.mutable-section-header {
  font-size: 17px;
  font-weight: 500;
  color: var(--r-text-color-primary);
  width: var(--news-cover-width) !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 48px;
}
.mutable-section-header .more-footer {
  padding: 0 !important;
}

.mutable-section-header .more-footer .container {
  width: auto !important;
}
.cell-plain-info-trailing {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  // width: 126px !important;
}
.cell-plain-info-action {
  color: var(--r-primary-color);
}
.cell-headline-plain {
  font-size: 14px;
  margin: 0px 16px;
}

.cell-plain-info {
  display: flex;
  justify-content: space-between;
}

.mutable-section-header-divider {
  width: 2px;
  background-color: var(--r-primary-color);
}
.mutable-section-header-leading {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}

.cell-plain-tabs-divider {
  margin: 0px 0px 12px 12px;
}

.cell-plain-subhead {
  margin: 8px 16px !important;
}

